<template>
    <div class="login">
        <el-form ref="form" :rules="rules" :model="form" class="container">
          <el-form-item>
            <div class="avatar">
              <img src="../../assets/img/index1.jpg" alt="">
            </div>
          </el-form-item> 
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="账户" prefix-icon="myicon myicon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="密码" prefix-icon="myicon myicon-key" type="password" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-btn"  @click="loginSubmit()" >登录</el-button>
          </el-form-item>
        </el-form>
      </div>
</template>

<script>
//必须加{}
import {checkUser} from '@/api/index.js'


export default {
  data:function(){

     var userValidate = (rule, value, callback) => {
        if (value.length >1 ) {
            callback();
        } else{
            callback(new Error('账号长度必须大于3'));
        }
    };

    return {
      form:{
        username: '',
        password: ''
      },
      rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            //自定义验证规则
            { validator: userValidate, trigger: 'blur' }
          ],
          password:[
             { required: true, message: '请输入密码', trigger: 'blur' },
          ]
       }
    }   //end return 

  }, //end data
  methods:{
      loginSubmit(){
        var that = this; //api中用es5写  用es6写下面可以直接用this
        // this.$refs[form].validate(function(valid){
         this.$refs.form.validate((valid) => {
           //验证成功
          if (valid) {

                checkUser(that.form).then(function(res){
                    if(res.meta.status === 200){
                      
                       //通过h5保存用户登录的唯一标识
                       localStorage.setItem('mytoken', res.data.token); 
                       //保存用户名
                       localStorage.setItem('username', res.data.username); 

                        //路由跳转(首页)
                      // that.$router.push({name:'Index'})
                      that.$router.push({name:'Welcome'})
                    }else{
                      that.$message({
                        type: 'error',
                        message: res.meta.msg
                      });
                    }
                });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  } //end methods
}
</script>

<style scoped>
  .login {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #2f4050;
  }
  .login .container {
      position: absolute;
      left: 0;
      right: 0;
      width: 400px;
      padding: 0px 40px 15px 40px;
      margin: 200px auto;
      background: white;
  }
  .login .container .avatar {
        position: relative;
        left: 50%;
        width: 120px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 10px solid #fff;
        box-shadow: 0 1px 5px #ccc;
        overflow: hidden;
  }
  .login .container .login-btn { width: 100%; }
  </style>